/**
 * 积分商城-今日任务
 */
'use strict';
import React, {
    Component
} from 'react'
import {
    Link
} from 'react-router'

import Header from './Common/Header'
import imgErr from '../Img/other/splitImg.jpg'
import LoadingBox from './Common/LoadingBox'
import {
    HttpService,
    dateFormat,
    Tips
} from '../Tools'

import imgPk from '../Img/mall/pk2.png'

export default class MyPackage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataList: [],
            dataLoad: 1,
            dataNull: 0,
            dataEnd: 0
        }
        this.page = 1;
        this.pagesize = 10;
        this.toBottom = 100;
    }
    componentWillMount() {
        this.getData()
    }

    componentDidMount() {
        window.onscroll = () => {
            const {
                dataEnd,
                dataNull,
                page
            } = this.state;
            if (this.dataLoad == 1 || dataEnd == 1 || dataNull == 1)
                return;
            var scrollTop = 0;
            if (document.documentElement && document.documentElement.scrollTop) {
                scrollTop = document.documentElement.scrollTop;
            } else if (document.body) {
                scrollTop = document.body.scrollTop;
            }
            if (document.body.clientHeight - window.innerHeight - scrollTop <= this.toBottom) {
                this.page++;
                this.getData();
            }
        }
    }
    //获取数据列表
    getData(status) {
        this.dataLoad = 1
        this.setState({
            dataLoad: 1,
            dataEnd: 0,
            dataNull: 0
        });
        if (status == 1)
            this.page = 1
        HttpService.query({
            // url: '/src/Data/mypackage.json',
            url: '/jf/peoplecard/pageCard',
            data: {
                token: sessionStorage.appToken,
                page: this.page,
                size: this.pagesize
            },
            success: (res => {
                this.dataLoad = 0
                this.setState({
                    dataLoad: 0
                });
                if (res.code == 50006) {
                    //获取数据成功
                    let dataList = res.data.list
                    if (status != 1)
                        dataList = this.state.dataList.concat(res.data.list);
                    this.setState({
                        dataList
                    });
                    if (res.data.total == this.pagesize) {
                        this.setState({
                            dataEnd: 1
                        });
                    } else if (res.data.list.length < this.pagesize) {
                        this.setState({
                            dataEnd: 1
                        });
                        if (dataList.length == 0) {
                            this.setState({
                                dataEnd: 0,
                                dataNull: 1
                            });
                        }
                    }
                    return;
                }
                Tips(res.msg);
            })
        })
    }
    render() {
        const {
            dataLoad,
            dataNull,
            dataEnd,
            dataList
        } = this.state
        let start = 0
        let nouse = 0
        let dataLists = dataList.map(function(item) {
            let beginTime = dateFormat(new Date(item.beginTime), '-',false).replace(/\-/g,'.')
            let endTime = dateFormat(new Date(item.endTime), '-',false).replace(/\-/g,'.')
            let url = imgErr
            let status = '未使用'
            if (item.usedtimes > 0)
                status = `已使用（${item.usedtimes}/${item.usetimes}）`

            if (item.smallImg.indexOf('{') > -1)
                url = JSON.parse(item.smallImg).goodsHeaderImg
            if (item.end == 1){
                start++;
            }else{
                nouse++;
            }
            return (
                <li>
                    {start==1?<title>已过期卡券</title>:null}
                    <Link className={item.end==1?'item timeout':'item'} to={'/packageDetail/'+item.serialNumber}>
                        <img src={url} />
                        <h5>{item.goodArchName}</h5>
                        <p>序列号：{item.serialNumber}</p>
                        <p>有效期：{beginTime}-{endTime}</p>
                        <p>券状态：{item.end==0?status:'已过期'}</p>
                    </Link>
                </li>
            )
        })
        return (
            <div className="task_today">
                <Header title="我的卡券" />
                <ul className='mypackagelists'>
                    {
                        dataList.length>0?
                        <li>{nouse>0?<title>未过期卡券</title>:null}{dataLists}</li>:null
                    }
                </ul>
                <LoadingBox dataLoad={dataLoad} dataNull={dataNull} dataEnd={dataEnd} dataNullMsg='暂无卡券' />
            </div>
        )
    }
}
